<template>
  <div>
    <button @click="imgIndex--" :disabled="imgIndex === 0">上⼀张</button>
    <img :src="imgList[imgIndex]" alt="图片" width="200" height="200" />
    <button @click="imgIndex++" :disabled="imgIndex === imgList.length - 1">下⼀张</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 图⽚列表
const imgList = [
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
  'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png'
];
// 当前图⽚索引
const imgIndex = ref(0);
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>